<template>
  <div class="user-page">
    <div class="user-box">
      <div class="top" @click="showPopup">
        <van-image round width=".7rem" height=".7rem" :src="avatarSrc" />
        <span>{{ nickname }}</span>
        <i @click="logOutModel"><van-icon :name="logIcon" /></i>
      </div>
      <van-grid :column-num="3">
        <van-grid-item icon="orders-o" text="我的订单" />
        <van-grid-item icon="bill-o" text="优惠券" />
        <van-grid-item icon="goods-collect-o" text="礼品卡" />
        <van-grid-item icon="star-o" text="我的收藏" />
        <van-grid-item icon="flag-o" text="我的足迹" />
        <van-grid-item icon="contact" text="会员福利" />
        <van-grid-item icon="aim" text="地址管理" />
        <van-grid-item icon="warn-o" text="账号安全" />
        <van-grid-item icon="service-o" text="联系客服" />
        <van-grid-item icon="question-o" text="帮助中心" />
        <van-grid-item
          icon="smile-comment-o
"
          text="意见反馈"
        />
      </van-grid>
    </div>
    <!-- 登录弹出框 -->
    <van-popup v-model="show">
      <van-form @submit="onSubmit">
        <van-field
          v-model="username"
          name="用户名"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          v-model="password"
          type="password"
          name="密码"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <div style="margin: 16px">
          <van-button round block type="danger" native-type="submit"
            >提交</van-button
          >
        </div>
      </van-form>
    </van-popup>

    <!-- 退出登录弹窗 -->
    <van-dialog
      v-model="logOutShow"
      title="登出确认"
      show-cancel-button
      @confirm="logOut"
    >
      <div style="text-align: center; padding: 0.2rem">是否退出当前账号？</div>
    </van-dialog>
  </div>
</template>

<script>
import { Tologin } from "@/request/api";
import { mapState, mapMutations } from "vuex";
export default {
  computed: {
    ...mapState({
      isgoBack: (state) => state.isGoBack.isgoBack,
    }),
  },
  data() {
    return {
      logOutShow: false,
      show: false,
      username: "",
      password: "",
      avatarSrc: "",
      nickname: "点击登录",
      logIcon: "arrow",
    };
  },
  created() {
    // 页面刷新，登录的头像，昵称都没了，
    // 所以需要页面刷新的时候，判断有没有登录，有登录就把信息填到页面上
    let token = localStorage.getItem("token");
    if (token) {
      let userInfo = JSON.parse(localStorage.getItem("userInfo"));
      this.avatarSrc = userInfo.avatar;
      this.nickname = userInfo.nickname;
      this.logIcon = "cross";
    }
  },
  methods: {
    ...mapMutations({
      chanisgoBack: "isGoBack/chanisgoBack",
    }),
    showPopup() {
      // 如果没有登录，才展示登录框
      // 如果登录了，点击就不展示登录框
      let token = localStorage.getItem("token");
      if (token) return;

      // 展示登录框
      this.show = true;
    },
    onSubmit(values) {
      // 点击登录
      console.log("submit", values);
      // 发起登录请求
      Tologin({
        username: values["用户名"],
        pwd: values["密码"],
      }).then((res) => {
        console.log(res);
        let userInfo = res.data.userInfo;
        // 1、提示用户登录成功
        this.$toast.success("登录成功");
        // 2.
        localStorage.setItem("token", res.data.token);
        localStorage.setItem("userInfo", JSON.stringify(userInfo));
        setTimeout(() => {
          this.show = false;
          this.avatarSrc = userInfo.avatar;
          this.nickname = userInfo.nickname;
          this.logIcon = "cross";
          // 判断如果是从其他页面过来的，登录完后就跳转到其他页面
          if (this.isgoBack) {
            console.log("回到登录页面", this.isgoBack);
            this.$router.go(-1);
            this.chanisgoBack(false);
          }
        }, 500);
      });
    },
    // 弹出退出登录框
    logOutModel() {
      // 没有登录的时候要不显示
      let token = localStorage.getItem("token");
      if (!token) return;
      //退出登录
      this.logOutShow = true;
    },
    // 点击退出登录框确认按钮，确认退出
    logOut() {
      localStorage.removeItem("userInfo");
      localStorage.removeItem("token");
      this.nickname = "点击登录";
      this.logIcon = "arrow";
      this.avatarSrc = "";
    },
  },
};
</script>
 
<style lang = "less" scoped>
.user-page {
  padding-bottom: 0.5rem;
}
.user-box {
  height: 100%;
  background-color: #efefef;
  .top {
    width: 3.75rem;
    height: 1.1rem;
    line-height: 1.1rem;
    background-color: #333;
    color: #fff;
    .van-image {
      margin-left: 0.1rem;
      vertical-align: middle;
    }
    span {
      display: inline-block;
      width: 70%;
      margin-left: 0.1rem;
      font-size: 14px;
    }
  }
}
.van-popup {
  width: 90%;
}
.van-grid-item {
  width: 1.25rem;
  height: 1.25rem;
}
</style>